<template>
    <div class="stat-card" :style="{ borderLeft: `4px solid ${color}` }">
      <div class="icon">
        <v-icon :name="icon" size="24" :color="color" />
      </div>
      <div class="content">
        <div class="title">{{ title }}</div>
        <div class="value">
          <span class="number">{{ value }}</span>
          <span v-if="unit" class="unit">{{ unit }}</span>
        </div>
        <div class="trend" :class="trend">
          <v-icon :name="trend === 'up' ? 'mdi-arrow-up' : 'mdi-arrow-down'" />
          {{ percentage }}%
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  defineProps<{
    title: string
    value: string
    unit?: string
    percentage: number
    trend: 'up' | 'down'
    icon: string
    color: string
  }>()
  </script>
  
  <style scoped lang="scss">
  .stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: transform 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
    &:hover {
      transform: translateY(-2px);
    }
  
    .icon {
      margin-right: 1rem;
      padding: 0.8rem;
      background: rgba($color: #000000, $alpha: 0.05);
      border-radius: 8px;
    }
  
    .content {
      .title {
        color: #666;
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
      }
  
      .value {
        .number {
          font-size: 1.8rem;
          font-weight: 600;
          color: #1a2b50;
          margin-right: 0.4rem;
        }
  
        .unit {
          font-size: 1rem;
          color: #888;
        }
      }
  
      .trend {
        font-size: 0.9rem;
        display: flex;
        align-items: center;
  
        &.up {
          color: #4bc0c0;
        }
  
        &.down {
          color: #ff6384;
        }
  
        .v-icon {
          margin-right: 0.3rem;
        }
      }
    }
  }
  </style>